<template>
<div class="about">
  <h2>count: {{count}}</h2>
  <h2>double: {{double}}</h2>
  <h2>double2: {{double2}}</h2>
  <hr>
  <button @click="increment">加1</button>
</div>
</template>

<script lang="ts">
import {
  computed,
  ref
} from "vue"
export default {
  setup() {
    const count = ref(0) // count是一个ref/引用对象, 内部包含存储数据的value属性

    // 只有getter的计算属性
    const double = computed(() => { // 计算属性本质上也是一个ref对象
      console.log('double computed', count.value)
      return count.value * 2
    })

    // 包含getter与setter的计算属性
    const double2 = computed({
      get () {
        return count.value * 2
      },
      set (value: number) {
        count.value = value/2
      }
    })

    // 更新响应式数据的函数
    const increment = () => {
      count.value++
      setTimeout(() => {
        double2.value += 2
      }, 1000);
    }

    return {
      count,
      increment,
      double,
      double2
    }
  }
}
</script>
